<template>
  <div>
<!--     <a href="javascript:;" @click="dian">点击一下</a> -->
    <el-row :gutter="50">
      <el-col :xs="12" :sm="7" :md="7" :lg="7" :xl="7" v-for="(item,i) in newList" :key="i" class="bg">
        <div class="grid-content bg-purple isbg" @click='isid(item.id)'>
            <!-- <img :src="item.cover" alt=""> -->
            <div class='xiao' :style="{ 'background': 'url(' + item.cover + ') no-repeat center center', 'background-size': '100% 100%'}">
                <router-link to="/defin" >
                <span @click='isid(item.id)'>
                  {{item.name}}
                </span>
                </router-link>
                
                
            </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ""
    };
  },
  created() {
    this.$store.dispatch("getclass");
  },
  computed:{
    newList(){
      return this.$store.state.iscla
    }
  },
  mounted() {
    this.list = this.$store.state.iscla;
    console.log(this.list);
  },
  methods: {
    isid(data){
      return this.$store.commit("getclassid",data)
    }
  }
};
</script>
<style>
.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 10px;
  min-height: 36px;
}
.isbg .xiao{
    height: 110px;
    border-radius: 8px;
    box-shadow: 10px 10px 5px  #888888;
    position:relative;
}
.xiao a span{
    position: absolute;
    left: 20px;
    bottom: 20px;
    text-align: center;
    font-size: 18pt;
    color: rgba(235, 233, 233, 0.918);
}
.bg{
    margin-bottom:50px
}
</style>